<style>
/*订单显示*/
.item{ width:270px; height:135px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
.item .tags{width:20px;float:left;text-align:center;}
.item .pic{width:100px; float:left;text-align:center;}
.item .pic img{max-width:100px; max-height:135px;border-radius:5px;}
.item .text{width: 150px;text-align:left;float: right;}
.text-item{width: 100%;}
.clear{clear:both;}
.layui-btn-small {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    font-size: 12px;
}
.small-table{margin: 0; }
.small-table td{padding: 4px;font-size: 10px}
</style>
<div class="fixed-bar">
<form class="layui-form layui-form-pane fixed-bar-form" action="{:url('mp/cutting/panel', ['caichuang_type' => $caichuangType])}" method="get" id="hisi-table-search">
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">订单号</label>
        <div class="layui-input-inline">
          <input type="text" name="client_ordernum" lay-verify="" placeholder="输入订单号" class="layui-input">
        </div>
    </div>
    {if env('env_site') == 'riwei' }
    <div class="layui-inline">
        <label class="layui-form-label">客户单号</label>
        <div class="layui-input-inline">
            <input type="text" name="ext_id" lay-verify="" placeholder="输入客户单号" class="layui-input">
        </div>
    </div>
    {/if}
    <div class="layui-inline removeStat">
        <label class="layui-form-label">是否可剪</label>
        <div class="layui-input-inline">
          {:Form::select('caichuang_can_do', -1, [-1 => '请选择', 0=>'不可裁剪', 1=>'可裁剪'], '', '')}
        </div>
    </div>
    <div class="layui-inline removeStat">
        <label class="layui-form-label">所属工厂</label>
            <div class="layui-input-inline">
                <select name="factory_id" lay-filter="factory" xm-select="method-value-example1">
                    <option value=""></option>
                    {volist name="factoryKV" id="key"}
                    <option class="opt" value="{$key}">{$factoryKV[$key]}</option>
                    {/volist}
                </select>
            </div>
    </div>
    <div class="layui-inline removeStat">
        <label class="layui-form-label">出货时间</label>
        <div class="layui-input-inline time_input">
          <input type="text" name="shipment_time" readonly="" id="shipment_time"  lay-verify="" placeholder="选择裁床完成日期" class="layui-input">

        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">物料SKU</label>
        <div class="layui-input-inline">
          <input type="text" name="material_sku" lay-verify="" placeholder="输入物料SKU" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
		<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>		
	</div>
</div>
</form>
</div>
<div id="view"><img src="/static/mp/image/loading.gif"></div>

<script id="tpl" type="text/html">
<div class="layui-collapse">
	{{#  layui.each(d, function(k, v){ }}
		{{#  if(v.caichuang_orders > 0){ }}
		<div class="layui-colla-item caigou">
			<h2 class="layui-colla-title">{{ v.name }} - {{ v.caichuang_orders }}单 - {{ v.caichuang_items }}件</h2>
			<div class="layui-colla-content layui-show">
					
				{{#  layui.each(v.caichuang, function(kkk, vvv){ }}
					<div class="item layui-anim layui-anim-scaleSpring">
<!--						<div class="tags"></div>-->
						<div class="pic"><img src="{{ vvv.pic }}" class="lay-pic"></div>
						<div class="text">
                            <div class="text-item">
                                出货时间：{{ vvv.shipment_time }}&nbsp;&nbsp;<span><i id="tips{{vvv.client_ordernum}}" onmouseover="showDiv('tips'+{{vvv.client_ordernum}}, '此日期仅为客户要求的完工日期')" class="layui-icon layui-icon-tips" style="color: #1E9FFF;"></i><span>
                            </div>
                            {{ vvv.caichuang_can_do }} &nbsp;&nbsp;
							
							{{#  if(vvv.same_material_sku != ''){ }}
							<span class="copy-item red" data-copy="{{vvv.same_material_sku}}" id="material_sku_tips{{vvv.client_ordernum}}" onmouseover="showDiv('material_sku_tips'+{{vvv.client_ordernum}}, '{{vvv.same_material_sku}}')">同物料</span>
							{{#  } }}

							<br>
                            <span class="copy-item blue">{{ vvv.client_ordernum }}</span>&nbsp;&nbsp; <span class="layui-btn layui-btn-small layui-btn-warm">{{ vvv.type }}</span><br>
                            <span class="copy-item blue">{{ vvv.sku }}</span></br>
                            <span class="blue" id="{{vvv.order_id}}" onmouseover="showQuantityDetail({{vvv.order_id}})">{{ vvv.quantity }}</span> &nbsp;件<br>
                            <div class="text-item">
                                <span style="float:left">{{ vvv.factory_name }}</span>
                                <a href="{:url('logDetail')}?order_id={{ vvv.order_id }}" style="float:right" title="物料操作记录" class="hisi-iframe" hisi-data="{width: '800px', height: '500px'}"><i class="aicon ai-caidan" style="font-size:25px;"></i>&nbsp;&nbsp;<a>
                            </div>
                            
                        </div>
                    </div>
				{{#  }); }}

				<div class="clear"></div>
			</div>
		</div>
		{{#  } }}
	{{#  }) }}

</div>

</script>

{include file="system@block/layui" /}

<script>
	layui.use([ 'element', 'layer', 'laytpl', 'tool','laydate','table','form'], function() {
		var element = layui.element;
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var laytpl = layui.laytpl,laydate=layui.laydate ,table = layui.table;
        window.showDiv = function(id, msg) { 
            tip_index_show=layer.tips("<span>"+msg+"</span>",         
            "#"+id+"",
            {tips:[1, '#4794ec']});
            $("#"+id+"").mouseleave(function(){
                layer.close(tip_index_show);
            });
        }
        window.showQuantityDetail = function(order_id) {
            $.ajax({
			   type: "POST",
			   url: "{:url('mp/cutting/getQuantityDetail')}?order_id="+order_id,
			   dataType:"json",
			   success: function(res){
                   var top="",foot="",data=res.data;
                    if($.isEmptyObject(data) == false){
                        for (var k in data){
                            top+="<td>"+data[k]['size_name']+"</td>";
                            foot+="<td>"+data[k]['order_count']+"</td>";
                        }
                    } else {
                        top+="<td>空</td>";
                        foot+="<td>空</td>";
                    }
                    var table="<table class='layui-table small-table'>";
                        table+="<tbody>";
                        table+="<tr class='top'>";
                        table+="<td>尺码</td>";
                        table+=top;
                        table+="</tr>";
                        table+="<tr class='foot'>";
                        table+="<td>下单件数</td>";
                        table+=foot;
                        table+="</tr>";
                        table+="</tbody>";
                        table+="</table>";
                    tip_index=layer.tips(table,"#"+order_id+"",{tips:[3, '#fff'],area: ['250px', 'auto'],time:10000});
                    $("#"+order_id+"").mouseleave(function(){
                        layer.close(tip_index);
                    });
			   }
			});    
        }
        
		laydate.render({
		    elem: '#shipment_time'
		    ,range: '~'
		    ,theme: 'molv'
		    ,mark: {'{:$today}':''}
	    	,change: function(value, date, endDate){
		    	$('#shipment_time').val(value);
            	$('#layui-laydate1').remove();//关闭面板
            }
		});
     	// 获取订单
		getOrders([]);
		function getOrders(data){
			$.ajax({
			   type: "POST",
			   url: "{:url('mp/cutting/panel', ['caichuang_type' => $caichuangType])}",
			   data: data,
			   dataType:"json",
			   success: function(res){
				   if($.isEmptyObject(res.data) == false){
					   var Tpl = $('#tpl').html();
					   laytpl(Tpl).render(res.data, function(html){
					   		$('#view').html(html);
					   });
				   } else {
					   $('#view').html('暂无数据');
				   }
				   
				   element.init();
			   }
			});
		}
		form.on('submit(demo1)', function (data) {
            //表单数据formData
            var formData;
            formData = data.field;
            getOrders(formData);
        });
	});
</script>